<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-primary {
                @apply bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-all duration-300 font-medium;
            }
            .btn-secondary {
                @apply bg-white border border-gray-300 text-dark px-6 py-3 rounded-lg hover:bg-gray-50 transition-all duration-300 font-medium;
            }
            .form-input {
                @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
            }
            .form-group {
                @apply mb-5;
            }
            .form-label {
                @apply block text-sm font-medium text-gray-700 mb-1;
            }
            .auth-card {
                @apply bg-white rounded-2xl shadow-lg p-8 w-full max-w-md;
            }
            .auth-header {
                @apply text-center mb-8;
            }
            .auth-title {
                @apply text-2xl font-bold mb-2;
            }
            .auth-subtitle {
                @apply text-gray-500 text-sm;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row items-center justify-center gap-12">
            <!-- 左侧品牌展示 -->
            <div class="hidden md:block md:w-1/2">
                <div class="mb-8">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-white text-2xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-primary">黄淮学院</h1>
                            <p class="text-sm text-info">校园活动管理系统</p>
                        </div>
                    </div>
                    <h2 class="text-3xl font-bold mb-4 text-dark">欢迎回来！</h2>
                    <p class="text-gray-600 mb-6 max-w-md">登录后即可浏览和参与丰富多彩的校园活动，管理个人信息，查看活动日程。</p>
                    <div class="space-y-4">
                        <div class="flex items-center gap-3 bg-white p-3 rounded-lg shadow-sm">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                <i class="fa fa-calendar text-primary"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">实时活动推送</h3>
                                <p class="text-xs text-gray-500">不错过任何精彩活动</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 bg-white p-3 rounded-lg shadow-sm">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <i class="fa fa-ticket text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">一键报名参与</h3>
                                <p class="text-xs text-gray-500">轻松管理您的活动</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧登录表单 -->
            <div class="w-full md:w-1/2 flex justify-center">
                <div class="auth-card">
                    <div class="auth-header">
                        <h2 class="auth-title">用户登录</h2>
                        <p class="auth-subtitle">欢迎回来，请输入您的账号和密码</p>
                    </div>
                    
                    <form id="loginForm" class="space-y-5">
                        <div class="form-group">
                            <label for="username" class="form-label">账号</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-user"></i>
                                </span>
                                <input type="text" id="username" class="form-input pl-10" placeholder="请输入学号/工号" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="flex justify-between items-center mb-1">
                                <label for="password" class="form-label">密码</label>
                                <a href="#" id="forgotPasswordLink" class="text-xs text-primary hover:text-primary/80 transition-colors">忘记密码？</a>
                            </div>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="password" class="form-input pl-10" placeholder="请输入密码" required>
                                <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <input type="checkbox" id="remember" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                            <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
                        </div>
                        
                        <button type="submit" class="btn-primary w-full">登录</button>
                        
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-gray-300"></div>
                            </div>
                            <div class="relative flex justify-center">
                                <span class="px-4 bg-white text-sm text-gray-500">或使用以下方式登录</span>
                            </div>
                        </div>
                        

                    </form>
                    
                    <div class="text-center mt-6">
                        <p class="text-sm text-gray-600">
                            还没有账号？ <a href="register.html" class="text-primary font-medium hover:text-primary/80 transition-colors">立即注册</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录成功提示 -->
    <div id="successToast" class="fixed bottom-5 right-5 bg-success text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3 transform translate-y-20 opacity-0 transition-all duration-300">
        <i class="fa fa-check-circle"></i>
        <span>登录成功！正在跳转...</span>
    </div>
    
    <!-- 忘记密码提示 -->
    <div id="resetPasswordToast" class="fixed bottom-5 right-5 bg-info text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3 transform translate-y-20 opacity-0 transition-all duration-300">
        <i class="fa fa-envelope"></i>
        <span>已发送更改密码的邮件，请登录您邮箱进行找回！</span>
    </div>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 密码显示切换
            const togglePassword = document.getElementById('togglePassword');
            const password = document.getElementById('password');
            
            if (togglePassword && password) {
                togglePassword.addEventListener('click', function() {
                    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                    password.setAttribute('type', type);
                    
                    // 切换图标
                    const icon = togglePassword.querySelector('i');
                    icon.classList.toggle('fa-eye');
                    icon.classList.toggle('fa-eye-slash');
                });
            }
            
            // 表单提交处理
            const loginForm = document.getElementById('loginForm');
            const successToast = document.getElementById('successToast');
            
            if (loginForm && successToast) {
                loginForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 这里可以添加表单验证逻辑
                    const username = document.getElementById('username').value;
                    const password = document.getElementById('password').value;
                    
                    if (!username || !password) {
                        alert('请输入账号和密码');
                        return;
                    }
                    
                    // 模拟登录请求
                    console.log('登录信息:', { username, password });
                    
                    // 显示成功提示
                    successToast.classList.remove('translate-y-20', 'opacity-0');
                    successToast.classList.add('translate-y-0', 'opacity-100');
                    
                    // 2秒后跳转到首页
                    setTimeout(() => {
                        window.location.href = 'index.html';
                    }, 2000);
                });
            }
            
            // 添加表单动画效果
            const formInputs = document.querySelectorAll('.form-input');
            if (formInputs) {
                formInputs.forEach(function(input) {
                    input.addEventListener('focus', function() {
                        this.parentElement.classList.add('scale-[1.02]');
                        this.parentElement.style.transition = 'transform 0.3s ease';
                    });
                    
                    input.addEventListener('blur', function() {
                        this.parentElement.classList.remove('scale-[1.02]');
                    });
                });
            }
            
            // 忘记密码功能
            const forgotPasswordLink = document.getElementById('forgotPasswordLink');
            const resetPasswordToast = document.getElementById('resetPasswordToast');
            const usernameInput = document.getElementById('username');
            
            if (forgotPasswordLink && resetPasswordToast && usernameInput) {
                forgotPasswordLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 检查用户是否输入了账号
                    const username = usernameInput.value.trim();
                    
                    if (username) {
                        // 有账号，显示密码重置邮件已发送提示
                        resetPasswordToast.querySelector('span').textContent = '已发送更改密码的邮件，请登录您邮箱进行找回！';
                        resetPasswordToast.querySelector('i').className = 'fa fa-envelope';
                        resetPasswordToast.classList.add('bg-info');
                        resetPasswordToast.classList.remove('bg-warning');
                    } else {
                        // 没有账号，提示用户输入账号
                        resetPasswordToast.querySelector('span').textContent = '请输入账号后再点击忘记密码！';
                        resetPasswordToast.querySelector('i').className = 'fa fa-exclamation-triangle';
                        resetPasswordToast.classList.add('bg-warning');
                        resetPasswordToast.classList.remove('bg-info');
                    }
                    
                    // 显示提示
                    resetPasswordToast.classList.remove('translate-y-20', 'opacity-0');
                    resetPasswordToast.classList.add('translate-y-0', 'opacity-100');
                    
                    // 3秒后自动隐藏提示
                    setTimeout(function() {
                        resetPasswordToast.classList.add('translate-y-20', 'opacity-0');
                        resetPasswordToast.classList.remove('translate-y-0', 'opacity-100');
                    }, 3000);
                });
            }
        });
    </script>
</body>
</html>